<template>
    <div id="nav">
        {{product.price}} ==={{num}}
        <button @click="add">add</button>

        用户名：{{user.username}}  {{user.age}}  ===money = {{money}}
    </div>
</template>
<script lang="ts"> 
import {defineComponent,ref,reactive,toRefs,watch, computed} from 'vue';
export default defineComponent({
    beforeCreate(){
        console.log("beforeCreate")
    },
    created(){
        console.log("created")
    },
    setup(props,context){
        // console.log(props,context)
        // //props :父级传递数据 context：
        // console.log(this);
        // console.log("setup");

        // let num = ref(0);

        let product = ref({
            title:{test:'11'},
            price:19
        })

        // let num = ref(0);  //基本数据  推荐

        let data = reactive({
            user:{
                username:'zs',
                age:18
            },
            num:0,
            day:new Date()
        })

 
        // watch(num,(newVal) => {
        //     console.log(newVal,'newVal')
        // })
        //watch 监听：必须要找到指定的属性
        watch(() => data.user.username,(newVal) => {
            console.log(newVal,'newVal')
        })

        watch(() => product.value.price,(newVal) => {
            console.log(newVal,'newVal price')
        })

        let add = () => {
            data.user.username = 'qq'
            product.value.price = 111111111111111
        }

        let money = computed(() => `$${data.num}`)

        return {
            // num,
            add,
            product,
            ...toRefs(data),
            money
        }
    }
})
</script>